<template>
    <div class="course">
        <mt-header title="课程安排">
            <router-link to="/MainContent" slot="left">
              <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>

        <div class="page-picker-wrapper">
          <mt-picker :slots="dateSlots" @change="onDateChange" :visible-item-count="1"></mt-picker>
        </div>
        <p class="tip">在校时间: {{ dateStart }} 至 {{ dateEnd }}</p>

        <div class="page-picker-wrapper">
          <mt-picker :slots="yearSlot" @change="onYearChange" :visible-item-count="1"></mt-picker>
        </div>
        <p class="tip">学期: {{ year }}</p>

        <mt-button type="primary" size="large" style="width:99%;margin:0 auto" @click="toList">
          查询
          <img src="./search.png" height="20" width="20" slot="icon">
        </mt-button>
    </div>
</template>
<script>
    export default{
        name:'course',
        data(){
          return {
            dateSlots: [
              {
                flex: 1,
                values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
                className: 'slot1',
                textAlign: 'right'
              }, {
                divider: true,
                content: '-',
                className: 'slot2'
              }, {
                flex: 1,
                values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
                className: 'slot3',
                textAlign: 'left'
              }
            ],
            dateStart: '2002',
            dateEnd: '2003',

            //选择学期
            yearSlot: [{
              flex: 1,
              values: ['1', '2'],
              className: 'slot1',
              textAlign:'center'
            }],
            year:'0',
          }
        },
        methods:{
          onDateChange(picker, values) {
            if (values[0] > values[1]) {
              picker.setSlotValue(1, values[0]);
            }
            this.dateStart = values[0];
            this.dateEnd = values[1];
          },
          onYearChange(picker, values) {
            this.year = values[0];
          },
          toList(){
            this.$router.push({name:'CourseListInfo'});
          }
        }
    }
</script>
<style>
  .tip{
      color:rgb(38,162,255);
      font-family: "Meiryo UI";
      padding:5px;

  }
</style>
